﻿/// <reference path="../../../MyJS/MyString.js" />
/// <reference path="../../jquery-1.10.2.js" />
/// <reference path="../../My/JQExtend.js" />

/*属性框控件*/
var PropertyWin = function (configs) {
    /// <summary>jq属性框</summary>
    this.config = { //属性框的配置属性
        outerTableCls: 'outerTable', //整个属性表的风格
        innerTableCls: 'tCommon', //内部属性列表的风格
        titleCls: 'titleBar', //属性表标题的风格
        itemTitleCls: 'itemTitle', //每一项属性值的标题的风格
        itemValCls: 'itemValue', //每一项属性值的值域的风格
        //下面不是通过CSS类名去控制样式，是通过css的json对象去控制，跟jq的传参一致
        outerTableCSS: {},
        innerTableCSS: {},
        titleCSS: {},
        itemTitleCSS: {}, //每一项属性值的标题的风格
        itemValCSS: {} //每一项属性值的值域的风格
    };
    this.propertyTable = null; //当前的jq对象
    this.propertyItem = null; //每一项属性名/对

    //复制传入的属性值
    $.extend(true, this.config, configs);
    this.init();
};

//表格的html模板
PropertyWin.tableHtmlTemplate = "<table border='0' tableType='property' cellpadding='0' cellspacing='0' class='{outerTableCls}'>" +
                                    "<tr>" +
                                        "<td winTitle class='{titleCls}'>属性列表</td>" +
                                    "</tr>" +
                                    "<tr><td><table border='0' cellpadding='0' cellspacing='0' tableType='propertyData' class='{innerTableCls}'></table></td></tr>" +
                                  "</table>";
//每一项属性值/对的html模板
PropertyWin.itemHtmlTemplate = "<tr><td class='{itemTitleCls}'></td><td class='{itemValCls}'></td></tr>";

PropertyWin.prototype.init = function () {
    /// <summary>初始化控件</summary>
    //复制每一项属性值
    var html = PropertyWin.tableHtmlTemplate; //切记要移除所有换行符号
    var propertyItemHtml = PropertyWin.itemHtmlTemplate;
    var i = 0;
    for (var item in this.config) {
        //过滤CSS样式风格
        if (typeof (item) !== "object") {
            html = MyString.replaceAll(html, "{" + item + "}", this.config[item]);
            propertyItemHtml = MyString.replaceAll(propertyItemHtml, "{" + item + "}", this.config[item]);
        }
    };
    var table = $(html);
    table.css(this.config.outerTableCSS);
    table.find("td[winTitle]").css(this.config.titleCSS);
    table.find("table[tableType=propertyData]").css(this.config.innerTableCSS);
    this.propertyItem = $(propertyItemHtml);
    this.propertyItem.find('td').first().css(this.config.itemTitleCSS);
    this.propertyItem.find('td').last().css(this.config.itemValCSS);
    this.propertyTable = table;
};

PropertyWin.prototype.updateData = function (data) {
    /// <summary>刷新属性框的数据</summary>
    /// <param name="data" type="Array">属性框的数据，必须是一个对象数组，格式为：[{title:属性名,value:对应的属性值,controlType:控件的输入类型}]</param>
    if (!data) return;
    //清空原有的属性值
    var propertyDataTable = $(this.propertyTable).find("table[tableType=propertyData]");
    propertyDataTable.empty();
    var table = $(PropertyWin.itemHtmlTemplate);
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var propertyItem = this.propertyItem.clone();
        $(propertyItem).appendTo(propertyDataTable).find("td").each(function (i) {
            if (i === 0) { //标题列
                $(this).text(item.title);
            }
            else if (i === 1) {
                var control = $.create(item.controlType, item.controlConfig);
                control.appendTo(this);
            }
        });
    }

    //属性框的数据
    this.data = data;
};

PropertyWin.prototype.appendTo = function (el) {
    /// <summary>属性框渲染到哪个节点上面去</summary>
    /// <param name="el" type="DomElement/String[id]">被渲染的节点</param>
    el = $.getJQObj(el);
    if (el === null) return;
    var propertyTb = $(el).find("table[tableType=property]");
    if (propertyTb.length === 0) {
        $(el).append(this.propertyTable);
    }
};

